<template>
	<gui-page ref="guipage" :apiLoadingStatus="apiLoadingStatus" :refresh="refresh" @reload="reload"
		:isLoading="pageLoading" :loadmore="true" @loadmorefun="loadData">
		<view class="main" slot="gBody">
			<gui-empty v-if="dataList.length <= 0">
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<!-- 请根据您的项目要求制作并更换为空图片 -->
					<image class="gui-empty-img" src="@/static/noImg.png"></image>
				</view>
				<text slot="text" class="gui-text-small gui-block-text gui-text-center gui-margin-top"
					style="color:#9DABFF;">暂无数据</text>
			</gui-empty>
			<view class="client_item" v-if="dataList != null" v-for="(order, oIndex) in dataList" :key="oIndex"
				@click="jumpDetail(order, oIndex)">
				<view class="row gui-flex gui-align-items-center gui-space-between">
					<view class="user_info gui-flex gui-align-items-center">
						<!-- <image class="tx_img" src="../../static/logo.png" mode="aspectFit"></image> -->
						<gui-image :src="order.avatar" :width="98" :height="98" borderRadius="50%"
							mode="aspectFit"></gui-image>
						<view class="info_row">
							<view class="name gui-flex gui-align-items-center">
								<text class="f26">{{order.name}}</text>
								<view class="sgin">{{$u.stateFormData(order.state)}}</view>
								<view class="sgin dannger" v-if="order.overDay">
									超过{{$u.overDayFormData(order.overDay)}}天未联系</view>
							</view>
							<view class="rate">
								<uni-rate size="12" :readonly="true" :value="order.level" />
							</view>
						</view>
					</view>
					<view class="phone">
						<text class="f22 c333">{{order.phone}}</text>
						<image class="phone_call ml_10" src="../../static/image/phone_call.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="desc_row gui-flex">
					<view class="item right_line">
						<view class="status">
							客户状态
						</view>
						<view class="val">
							{{$u.typeFormData(order.type)}}
						</view>
					</view>
					<view class="item right_line">
						<view class="status">
							跟进次数
						</view>
						<view class="val">
							{{order.followCount}}
						</view>
					</view>
					<view class="item right_line">
						<view class="status">
							最近联系
						</view>
						<view class="val">
							{{order.lastTime || '--'}}
						</view>
					</view>
					<view class="item">
						<view class="status">
							完成转化
						</view>
						<view class="val">
							{{order.finishTime || '--'}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</gui-page>
</template>

<script>
	export default {
		data() {
			return {
				refresh: true,
				pageLoading: false,
				apiLoadingStatus: false,
				query: {
					pageNum: 1,
					pageSize: 10,
					type: '3'
				},
				dataList: []
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			reload() {
				this.query.pageNum = 1;
				this.loadData(1);
			},
			loadData(isReload) {
				this.$api.getUserList(this.query).then(res => {
					var resultArr = res.data;
					let total = Math.ceil(res.total / this.query.pageSize);
					if (this.query.pageNum >= 2) {
						this.dataList = this.dataList.concat(resultArr);
						// 加载完成后停止加载动画
						this.$refs.guipage.stoploadmore();
						// 假定第3页加载了全部数据，通知组件不再加载更多
						// 实际开发由接口返回值来决定
						if (this.query.pageNum >= total) {
							this.$refs.guipage.nomore();
						}
					}
					// 第一页 有可能是第一次加载或者刷新
					else {
						this.dataList = [];
						this.dataList = resultArr;
						this.pageLoading = false;
						if (resultArr.length <= 0) {
							this.noData = true;
						}
						// 刷新
						if (isReload) {
							this.$refs.guipage.endReload();
						}
					}
					this.query.pageNum++;
					this.apiLoadingStatus = false;
				}).finally(e => {
					this.pageLoading = false;
				})
			},
			jumpDetail(item) {
				uni.$emit('selectChange', item);
				this.$u.back();
			},
		}
	}
</script>

<style>

</style>